<template>
   <div>
      <button class="greeting" v-on:click="onClick">
        <slot></slot> {{to}}
      </button>
      <span v-if="count>0"> x {{ count }}</span>
   </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  props:['to'],
  methods:{
    onClick(){
      if(this.count < 10){
        this.count++;
        this.$emit('click', this.to, this.count);
      }
    }
  }
}
</script>

<style scoped>
.greeting {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}
</style>
